<template>
	<view class="withdrawal-record-detail-layout">
		<!-- 提现状态 -->
		<view class="withdrawal-record-detail-status">
			<image src="/static/wallet/wallet_status_waiting_icon@2x.png" mode="aspectFit"></image>
			<text>等待处理</text>
			<text>已提交申请，等待打款处理</text>
		</view>
		<view class="withdrawal-record-desc">
			<text>到账时间说明：</text>
			<text>{{jsonData.walletRemark}}</text>
		</view>
		<!-- 提现记录信息 -->
		<view class="withdrawal-record-detail-info">
			<view class="withdrawal-record-detail-cell">
				<text>提现至</text>
				<text>{{getBankName()}}</text>
			</view>
			<view class="withdrawal-record-detail-cell">
				<text>提现金额</text>
				<text>{{jsonData.outAcctAmount}}</text>
			</view>
			<view class="withdrawal-record-detail-cell">
				<text>{{jsonData.isPublic == '0' ? '提现单笔手续费' : '提现手续费' }}</text>
				<text>{{formatPayFee()}}</text>
			</view>
			<view class="withdrawal-record-detail-cell" v-if="jsonData.isPublic == '0'">
				<text>发票税差</text>
				<text>{{jsonData.taxFee}}</text>
			</view>
			<view class="withdrawal-record-detail-cell">
				<text>考核扣款</text>
				<text>{{jsonData.deductAmount}}</text>
			</view>
			<view class="withdrawal-record-detail-cell">
				<text>实际到账</text>
				<text>{{jsonData.payAmount}}</text>
			</view>
		</view>
		<view class="withdrawal-record-detail-bottom">
			<text>如有疑问请致电客服</text>
			<text @tap="callMakeTel">{{CUSTOMSERVICE_TEL}}</text>
		</view>
		
	</view>
</template>

<script setup>
	import { CUSTOMSERVICE_TEL } from '@/common/config/config.js'
	const props = defineProps(['data'])
	const jsonData = JSON.parse(decodeURIComponent(props.data))
	const formatPayFee = () => {
		return jsonData.isPublic == '0' ? jsonData.payFee : `${jsonData.outAcctAmount}*${jsonData.taxPoint}%+${jsonData.payFee}`
	}
	const getBankName = ()=>{
		if(jsonData.cardNo.length >= 4){
			const code = jsonData.cardNo.slice(-4)
			return `${jsonData.bankName} (${code})`
		}
		return `${jsonData.bankName} (${jsonData.cardNo})`
	}
	// 拨打电话
	const callMakeTel = ()=>{
		uni.makePhoneCall({
			phoneNumber:CUSTOMSERVICE_TEL
		})
	}
</script>

<style lang="scss" scoped>
.withdrawal-record-detail-layout{
	padding: 0 30rpx 30rpx;
	background-color: #fff;
	min-height: 100vh;
	.withdrawal-record-detail-status{
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 60rpx;
		image{
			width: 80rpx;
			height: 80rpx;
			margin-bottom: 16rpx;
		}
		text:nth-of-type(2){
			color: $xh-color-9;
			font-size: 26rpx;
			margin-top: 30rpx;
		}
	}
	.withdrawal-record-desc{
		display: flex;
		flex-direction: column;
		padding-bottom: 30rpx;
		border-bottom: 1px solid #eee;
		font-size: 26rpx;
		text:nth-child(1){
			color: $xh-red-color;
			margin-bottom: 20rpx;
		}
	}
	
	
	.withdrawal-record-detail-info{
		margin-top: 50rpx;
		.withdrawal-record-detail-cell{
			display: flex;
			align-items: center;
			justify-content: space-between;
			font-size: 26rpx;
			&:nth-child(n + 2) {
				margin-top: 20rpx;
			}
		}
	}
	.withdrawal-record-detail-bottom{
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 24rpx;
		color: $xh-color-6;
		margin-top: 200rpx;
		text:nth-child(2){
			color: $xh-theme-color;
			margin-left: 6rpx;
		}
	}
}
</style>
